<template>
    <div class="ranking">
        <div class="header">
            <div class="header-left">
                <img class="header-left-icon" src="@/assets/images/ranking-ic.png" />
                <div class="header-left-title">排行榜</div>
                <img class="header-left-back" src="@/assets/images/ranking-back.png" @click="router.go(-1)" />
            </div>
            <div class="header-right">全部模式</div>
        </div>
        <div class="box">
            <div class="grade">
                <div class="grade-item" :style="{color:index ==activeIndex?'#fff':'#a0d4ee',fontSize:index ==activeIndex?'48px':'38px'}" v-for="(item,index) in project" :key="item.value" @click="handleClick(index)">{{ item.label }}</div>
            </div>
            <img class="left-bottom" src="@/assets/images/examination-left-bottom.png" />
            <div class="content">
                <div class="content-item" v-for="(item,index) in grade">
                    <div class="content-item-grade">{{ item.label }}</div>
                    <div class="content-item-info">
                        <div style="background: #fff;width: 429px;height: 788px;border-radius: 10px;display: flex;flex-direction: column;align-items: center;overflow-y: auto;">
                            <div class="content-item-info-row" v-for="(s,i ) in item.list">

                                <div class="content-item-info-row-ranking">
                                    <img src="@/assets/images/ranking-1.png" v-if="i==0" />
                                    <img src="@/assets/images/ranking-2.png" v-else-if="i==1" />
                                    <img src="@/assets/images/ranking-3.png" v-else-if="i==2" />
                                    <span v-else>{{ i + 1 }}</span>

                                </div>
                                <img class="content-item-info-row-head" src="@/assets/images/profile.jpg" />
                                <div class="content-item-info-row-name">{{ s.xsName }}</div>
                                <img class="content-item-info-row-sex" v-if="s.xsSex == '0'" src="@/assets/images/ranking-m.png" />
                                <img class="content-item-info-row-sex" v-else src="@/assets/images/ranking-w.png" /> -
                                <div class="content-item-info-row-class">{{ s.bjName }}</div>
                                <div class="content-item-info-row-value">{{ s.sjDfsz }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script setup name="Ranking">
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getTcStudentRank } from "@/api/tc/plan";
import { getDicts } from "@/api/system/dict/data";

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const project = ref([{ label: '立定跳远', value: 9 }, { label: '跳绳', value: 6 }, { label: '50米跑', value: 2 }, { label: '800米跑', value: 13 }, { label: '1000米跑', value: 12 },]);
const activeIndex = ref(0);
const grade = ref([]);

const queryParams = ref({
    sjTcxmid: project.value[0].value,
})

function handleClick(index) {
    activeIndex.value = index;
    queryParams.value.sjTcxmid = project.value[index].value;
    getData();
}

onMounted(async () => {
    getData()
})


/**
 * 获取数据
 */
async function getData() {
    try {
        grade.value = [];
        //获取年级字典
        const dict = await getDicts("tc_nj")
        //获取排行 安年级
        const res = await getTcStudentRank(queryParams.value);
        for (const key in res.data) {
            let f = dict.data.find(f => parseInt(f.dictValue) == key); 7
            res.data[key].forEach((item, index) => {
                if (queryParams.value.sjTcxmid == 2 || queryParams.value.sjTcxmid == 13 || queryParams.value.sjTcxmid == 14) {
                    item.sjDfsz = (item.sjDfsz / 1000).toFixed(2);
                }
            })

            grade.value.push({ label: f.dictLabel, value: key, list: res.data[key] })

        }


    } catch (err) {
        console.error(err)
    }
}



</script>
<style scoped lang="scss">
.ranking {
    width: 100%;
    height: 100%;
    background: url("@/assets/images/examination-bg.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

.box {
    display: flex;
}

.header {
    display: flex;
    width: 100%;
    height: 178px;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    &-left {
        display: flex;
        align-items: center;
        &-icon {
            width: 65px;
            height: 65px;
            position: relative;
            top: -10px;
        }
        &-title {
            margin-left: 14px;
            font-family: YouSheBiaoTiHei;
            font-size: 60px;
            line-height: 58px;
            letter-spacing: 0.04em;
            font-variation-settings: "opsz" auto;
            background: linear-gradient(0deg, #ffa536 0%, #ffffff 66%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }

        &-back {
            cursor: pointer;
            margin-left: 27px;
            width: 40px;
            height: 40px;
            &:hover {
                opacity: 0.8;
            }
        }
    }
    &-right {
        font-family: YouSheBiaoTiHei;
        font-size: 60px;
        line-height: 58px;
        letter-spacing: 0.04em;
        color: #ffffff;
    }
}
.left-bottom {
    position: absolute;
    left: 38px;
    bottom: 40px;
    width: 235px;
    height: 262px;
}
.content {
    width: 1596px;
    overflow-x: auto;
    display: flex;
    &-item {
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;

        &-grade {
            width: 232px;
            height: 80px;
            border-radius: 6px;
            opacity: 1;
            background: linear-gradient(
                180deg,
                #ff9759 0%,
                rgba(255, 214, 7, 0) 100%
            );
            font-family: YouSheBiaoTiHei;
            font-size: 40px;

            line-height: 30px;
            letter-spacing: 0em;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        &-info {
            width: 447px;
            height: 806px;
            border-radius: 10px;
            background: linear-gradient(211deg, #ffeec3 1%, #ff650a 96%);
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            &-row {
                margin-top: 6px;
                width: 410px;
                height: 64px;
                border-radius: 4px;
                background: rgba(255, 207, 153, 0.4);
                display: flex;
                align-items: center;
                // overflow: hidden;

                &-ranking {
                    padding: 0 10px;
                    width: 58px;
                    font-size: 20px;
                    color: #333;
                    display: flex;
                    justify-content: center;
                    img {
                        width: 40px;
                        height: 28px;
                    }
                }
                &-head {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                }
                &-name {
                    width: 72px;
                    overflow: hidden;
                    margin-left: 10px;
                    font-size: 20px;
                    color: #333;
                }
                &-sex {
                    margin: 0 10px;
                    width: 20px;
                    height: 20px;
                }
                &-class {
                    width: 100px;
                    font-size: 20px;
                    color: #333;
                }
                &-value {
                    width: 80px;
                    margin-left: 18px;
                    font-size: 22px;
                    color: #333;
                }
            }
        }
    }
}
.grade {
    width: 300px;
    padding-left: 30px;
    margin-top: 80px;
    &-item {
        width: 100%;
        display: flex;
        justify-content: center;
        font-family: DingTalk JinBuTi;
        font-size: 38px;
        font-weight: normal;
        line-height: 58px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #a0d4ee;
        cursor: pointer;
    }
}
</style>

